<template>
  <div id="all">
    <div id="center">
      <el-container>
        <!--      <el-header>Header</el-header>-->
        <el-main>
          <!--    <h1>This is an house page</h1>-->
          <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>新房</el-breadcrumb-item>
          </el-breadcrumb>

          <el-tabs class="local-form" type="border-card" style="margin-top: 25px ;">
            <el-tab-pane label="条件找房" style="width: 1018px;height: 380px;">
              <div style="margin-top: 25px;">
                <el-input placeholder="请输入标题或区域" v-model="searchText" class="input-with-select"
                          style="width: 450px ;">
                  <el-button slot="append" icon="el-icon-search" type="primary" @click="searchHouse">搜索</el-button>
                </el-input>
              </div>
              <el-form ref="form" label-width="90px">
                <el-form-item label="售价：">
                  <el-radio-group v-model="params.price" @change="handleRadioChange">
                    <el-radio label="">全部</el-radio>
                    <el-radio label="900000-1900000">90-190万元</el-radio>
                    <el-radio label="1900000-2900000">190-290万元</el-radio>
                    <el-radio label="2900000-3900000">290-390万元</el-radio>
                    <el-radio label="3900000以上">390万元以上</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="面积：">
                  <el-radio-group v-model="params.area" @change="handleRadioChange">
                    <el-radio label="">全部</el-radio>
                    <el-radio label="70-100">70-100平米</el-radio>
                    <el-radio label="100-130">100-130平米</el-radio>
                    <el-radio label="130以上">130平米以上</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="楼层：">
                  <el-radio-group v-model="params.floor" @change="handleRadioChange">
                    <el-radio label="">全部</el-radio>
                    <el-radio label="1-5">1-5层</el-radio>
                    <el-radio label="6-10">6-10层</el-radio>
                    <el-radio label="11-15">11-15层</el-radio>
                    <el-radio label="16以上">16层以上</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="电梯：">
                  <el-radio-group v-model="params.hasElevator" @change="handleRadioChange">
                    <el-radio label="">全部</el-radio>
                    <el-radio label="0">无电梯</el-radio>
                    <el-radio label="1">有电梯</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="推荐：">
                  <el-radio-group v-model="params.recom" @change="handleRadioChange">
                    <el-radio label="">全部</el-radio>
                    <el-radio label="1">只看推荐</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="地区：">
                  <el-radio-group v-model="params.sectionId" @change="handleRadioChange">
                    <el-radio label="">全部</el-radio>
                    <el-radio v-for="i in sectionList" :label="i.id">{{i.name}}</el-radio>
                  </el-radio-group>
                </el-form-item>

<!--                <el-form-item label="居住时间：">-->
<!--                  <el-radio-group v-model="params.leaseTime" @change="handleRadioChange">-->
<!--                    <el-radio label="">全部</el-radio>-->
<!--                    <el-radio label="1-3">1-3个月</el-radio>-->
<!--                    <el-radio label="4-6">4-6个月</el-radio>-->
<!--                    <el-radio label="6以上">6个月以上</el-radio>-->
<!--                  </el-radio-group>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="租房类型：">-->
<!--                  <el-radio-group v-model="params.leaseType" @change="handleRadioChange">-->
<!--                    <el-radio label="">全部</el-radio>-->
<!--                    <el-radio label="1">整租</el-radio>-->
<!--                    <el-radio label="2">合租</el-radio>-->
<!--                  </el-radio-group>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="房子年限：">-->
<!--                  <el-radio-group v-model="params.houseAge" @change="handleRadioChange">-->
<!--                    <el-radio label="">全部</el-radio>-->
<!--                    <el-radio label="0-5">0-5年</el-radio>-->
<!--                    <el-radio label="5-10">5-10年</el-radio>-->
<!--                    <el-radio label="10以上">10年以上</el-radio>-->
<!--                  </el-radio-group>-->
<!--                </el-form-item>-->

              </el-form>

            </el-tab-pane>

<!--            <el-tab-pane label="区域找房">-->
<!--              <div class="demo-image__placeholder">-->
<!--                <div class="block">-->
<!--                  <span class="demonstration">区域</span>-->
<!--                  <el-image :src="src">-->
<!--                    <div slot="placeholder" class="image-slot">-->
<!--                      加载中<span class="dot">...</span>-->
<!--                    </div>-->
<!--                  </el-image>-->
<!--                </div>-->
<!--              </div>-->
<!--            </el-tab-pane>-->
          </el-tabs>

          <el-tabs type="border-card" style="margin-top: 25px">
            <el-tab-pane>
              <span slot="label"><i class="el-icon-school"></i> 所有房源</span>
              <!--房源列表开始-->
              <el-row gutterValue=20>
                <el-col style="margin: 10px 0" span=8 v-for="p in houseArr">
                  <el-card style="width: 350px ; height: 300px">
                    <a :href="'/new-house-detail?houseId='+p.id">
                      <img :src="p.majorImage" width="300px" height="212px">
                      <p style="font-size: 14px;height: 15px">{{ p.name }}</p>
                      <b style="color: red">￥{{ p.price }}元</b>
                    </a>
                  </el-card>
                </el-col>
              </el-row>
              <!--房源列表结束-->
            </el-tab-pane>
          </el-tabs>

          <div style="text-align: right; margin: 10px auto;" v-if="isDisplay">
            <el-pagination
                @current-change="changePage"
                layout="total, prev, pager, next"
                :total="total"
                :current-page="currentPage"
                :page-size="pageSize"
                >
            </el-pagination>
          </div>
          <el-tabs type="border-card">
            <el-tab-pane>
              <span slot="label"><i class="el-icon-school"></i> 管家推荐</span>
              <!--房源列表开始-->
              <el-row gutterValue=20>
                <el-col style="margin: 10px 0" span=8 v-for="p in recomNewHouseArr">
                  <el-card style="width: 350px ; height: 300px">
                    <a href="">
                      <img :src="p.majorImage" width="300px" height="212px">
                      <p style="font-size: 14px;height: 15px">{{ p.name }}</p>
                      <b style="color: red">￥{{ p.price }}元</b>
                    </a>
                  </el-card>
                </el-col>
              </el-row>
              <!--房源列表结束-->
            </el-tab-pane>
          </el-tabs>
        </el-main>
        <!--      <el-footer>Footer</el-footer>-->
      </el-container>
    </div>


  </div>
</template>


<script>
export default {
  props: {
    gutterValue: {
      type: [Number, String],
      default: 0,
      validator(value) {
        if (typeof value === 'string') {
          return !isNaN(parseFloat(value)) && isFinite(value)
        } else {
          return typeof value === 'number'
        }
      },
    },
    spanValue: {
      type: [Number, String],
      default: 0,
      validator(value) {
        if (typeof value === 'string') {
          return !isNaN(parseFloat(value)) && isFinite(value)
        } else {
          return typeof value === 'number'
        }
      },
    },
  },
  data() {
    return {
      sectionList: [],
      radioValue: 1,
      src: "https://inews.gtimg.com/newsapp_bt/0/13005900645/1000",
      params: {
        price: '',
        area: '',
        floor: '',
        hasElevator: '',
        recom: '',
        sectionId: '',
        leaseTime: '',
        leaseType: '',
        houseAge: '',
        houseCategoryId: '4'
      },
      searchText: '',
      houseArr: [],
      recomNewHouseArr: [],
      total: 0,
      pageSize: 0,
      currentPage: 1,
      isDisplay: true
    }
  },
  methods: {
    goHouseDetail(houseId) {
      this.$router.push('/new-house-detail?houseId=' + houseId);
    },
    searchHouse() {
      let url = 'http://localhost:9200/house/list/cha?name=' + this.searchText+'&hcid=4';
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.houseArr = jsonResult.data;
          this.isDisplay = false
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    handleRadioChange() {
      let page = this.$router.currentRoute.query.page;
      let cityParentId = this.$router.currentRoute.query.cityParentId;
      let path = this.$router.currentRoute.path;
      if (page != 1) {

        this.$router.push({path: path, query: {cityParentId: cityParentId, page: 1}})
      }
      this.loadHouseList();
    },
    loadHouseList() {
      this.isDisplay = true;
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }
      this.params.houseCategoryId = 4;
      let formData = this.qs.stringify(this.params);
      let url = 'http://localhost:9200/house/list/chaxiang?' + formData + '&page=' + page;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.houseArr = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.total = jsonResult.data.total;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    // 切换分页
    changePage(page) {
      let path = this.$router.currentRoute.path;
      let cityParentId = this.$router.currentRoute.query.cityParentId;
      this.$router.push({path: path, query: {cityParentId: cityParentId, page: page}})
      //this.$router.replace('?page=' + page);
      this.loadHouseList();
    },
    // 加载房源列表
//     loadHouseList() {
//       let page = this.$router.currentRoute.query.page;
//       if (!page) {
//         page = 1;
//       }
// /* 加载数目18 */
//       let url = 'http://localhost:9200/house/list/new-house?page=' + page;
//       this.axios.get(url).then((response) => {
//         let jsonResult = response.data;
//         if (jsonResult.state == 20000) {
//           this.houseArr = jsonResult.data.list;
//           this.currentPage = jsonResult.data.currentPage;
//           this.pageSize = jsonResult.data.pageSize;
//           this.total = jsonResult.data.total;
//         } else {
//           this.$alert(jsonResult.message, '错误', {
//             confirmButtonText: '确定',
//             callback: action => {
//             }
//           });
//         }
//       });
//     },
    loadSectionList() {
      let cityParentId = this.$router.currentRoute.query.cityParentId;
      let url = 'http://localhost:9200/section/list-by-parent?parentId='+cityParentId;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.sectionList = jsonResult.data.list;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    recomNewHouseList() {
      let url = 'http://localhost:9200/house/list/newrecom/less';

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.recomNewHouseArr = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
  },
  mounted() {
    this.loadSectionList();
    this.loadHouseList();
    this.recomNewHouseList();
  }
}
</script>


<style>

/*#all {*/
/*  width: 100%;*/
/*  background-color: #f4f4f4;*/
/*  background-image: url('../../public/imgs/filter_wrap_bg.jpg');*/
/*  background-repeat: no-repeat;*/
/*  background-size: 100%;*/
/*}*/


#center {
  width: 1120px;
  margin: 0 auto;
}

p {
  height: 10px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 30px;
}

/*body > .el-container {*/
/*  margin-bottom: 40px;*/
/*}*/


.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

li {
  list-style-type: none;
}

.el-main a {
  color: #666666;
  text-decoration: none;
}

.el-menu.el-menu--horizontal {
  border: 0;
}

.el-table .el-table__cell {
  padding: 0;
}

.filter-row .filter-tag-box a.active {
  background-color: #41cbc0;
  color: #fff;
  padding: 0 5px;
}

.filter-row .filter-tag-box a {
  color: #555;
  display: inline-block;
  margin-right: 15px;
}

a, a:visited {
  text-decoration: none;
  border-width: 0;
}

</style>